<template>
	<view class="addpage">
		<view class="allbox" v-for="(item,index) in list " :key="index">
			
		
		<view class="bannerbox">
			<view class="bannertitle">
				创建计划
			</view>
			<view class="line">
				<view class="left">
					标签
				</view>
				<view class="right">
					<picker class="picker" mode="selector" :value="index"  :range="evenlist"   @change="selectbiaoqian(item)">
							<view class="uni-input" style="color: #1A4f8A;">{{item.biaoqian}}</view>
						</picker>
					<view class="iconfont icon-xiangyou1">
						
					</view>
				</view>
			</view>
			<view class="line">
				<view class="left">
				计划名称
				</view>
				<view class="right">
					<input type="text" placeholder="请输入" v-model="item.name" />
				</view>
			</view>
			<view class="line">
				<view class="left">
				计划说明
				</view>
				<view class="right">
					<input type="text" placeholder="请输入" v-model="item.content" />
				</view>
			</view>

		</view>
		<view class="bannerbox">
			<view class="bannertitle">
				计划内容
			</view>
			<view class="line">
				<view class="left">
				主题
				</view>
				<view class="right">
					<input type="text" placeholder="请输入" v-model="item.title" />
				</view>
			</view>
			<view class="line">
				<view class="left">
				说明
				</view>
				<view class="right">
					<input type="text" placeholder="请输入" v-model="item.shuoming" />
				</view>
			</view>
			<view class="line">
				<view class="left">
					时间
				</view>
				<view class="right">
					<picker class="picker" mode="date"  start="2025-09-15" end="2030-09-30" @change="bindTimeChange">
							<view class="uni-input">{{item.date}}</view>
						</picker>
					<view class="iconfont icon-xiangyou1">
						
					</view>
				</view>
			</view>
			
			<view class="line zhongjian">
				<view class="left">
					阶段
				</view>
				<view class="right">
					<picker class="picker" mode="selector" :value="index"  :range="array"   @change="selectchongfu(item)">
							<view class="uni-input">{{item.jieduan}}</view>
						</picker>
					<view class="iconfont icon-xiangyou1">
						
					</view>
				</view>
			</view>
		</view>
		</view>
		<view class="iconline" @click="addlist">
			<view class="iconfont icon-tianjia">
				
			</view>
			点击继续添加
		</view>
		<view class="btn">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						name:'',
						biaoqian:'',
						content:'',
						title:'',
						shuoming:'',
						date:'',
						jieduan:''
						
					}
				],
				pro:{
						name:'',
						biaoqian:'',
						content:'',
						title:'',
						shuoming:'',
						date:'',
						jieduan:''
						
					},
				
				array:[
					'每天','每周','每月'
				],
				
			}
		},
		methods: {
			addlist(){
				this.list.push(this.pro)
			},
		}
	}
</script>

<style >
 .addpage{
	 width: 750rpx;
	 background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(255,255,255,0) 76%);
	 box-sizing: border-box;
	 padding: 30rpx;
	 height: 100vh;
	 padding-bottom: 50rpx;
	 
 }
 .allbox{
	 width: 100%;
	 margin-top: 50rpx;
 }
 .bannerbox{
	 width: 100%;
	 background-color: white;
	 box-sizing: border-box;
	 margin-top: 30rpx;
	 border-radius: 20rpx;
	 padding: 20rpx;
 }
 .bannertitle{
	 font-weight: bold;
	 border-left:8rpx solid #1A4F8A;
	 padding-left: 10rpx;
	 height: 40rpx;
	 line-height: 40rpx;
 }
 .line{
	 width: 100%;
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 padding: 0 30rpx;
	 height: 120rpx;
	 line-height: 120rpx;
	 font-weight: bold;
	 box-sizing: border-box;
	 border-bottom: 1rpx solid #f1f1f1;
	 
 }
 .uni-input{
	 width: 150rpx;
	 height: 120rpx;
	 text-align: center;
 }
 .picker{
	 width: 150rpx;
	 height: 120rpx;
	 line-height: 120rpx;
	 
 }
 .zhongjian{
	 border-top: 1rpx solid #f1f1f1;
	 border-bottom: 1rpx solid #f1f1f1;
 }
 .right{
	 display: flex;
	 align-items: center;
	 color: #B1B1B1 ;
	 
 }
 .iconline{
	 display: flex;
	 color: gray;
	 margin: 30rpx auto;
	 justify-content: center;
	 align-items: center;
 }
 .btn{
	 width: 80%;
	 margin: auto;
	 height: 100rpx;
	 border-radius: 30rpx;
	 text-align: center;
	 color: white;
    line-height: 100rpx;
		 background-color: #1A4F8A;
		 margin-top: 100rpx;
		 font-weight: bold;
 }
 
</style>
